<template>
	<view class="wui-loading" :class="[show?'wui-loading-show':'wui-loading-hidd']" :style="[show?loadingZindexComputed:{}]">
		<block v-if="show">
			<sonicWave  v-if="type==='sonicWave'" :color="color"/>
			<flipBlocks  v-if="type==='flipBlocks'" :color="color"/>
			<zoomCircle  v-if="type==='zoomCircle'" :color="color"/>
			<transverseCircle  v-if="type==='transverseCircle'" :color="color"/>
			<rotateCircles  v-if="type==='rotateCircles'" :color="color"/>
		</block>
	</view>
</template>

<script>
	import sonicWave from './components/sonicWave'
	import flipBlocks from './components/flipBlocks'
	import zoomCircle from './components/zoomCircle'
	import transverseCircle from './components/transverseCircle'
	import rotateCircles from './components/rotateCircles'
	export default {
		name: 'w-loading',
		components: {
			sonicWave,
			flipBlocks,
			zoomCircle,
			transverseCircle,
			rotateCircles
		},
		props:{
			type:{
				type:String,
				default:'rotateCircles'
			},
			color:{
				type:String,
				default:'#fff'
			}
		},
		data() {
			return {
				show: false
			}
		},
		computed:{
			loadingZindexComputed(){
				return {
					zIndex:this.uniWuiConfig.zIndex.loading
				}
			}
		},
		methods: {
			showLoading() {
				this.show = true
			},
			hiddLoading() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wui-loading {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all .3s;
	}

	.wui-loading-show {
		z-index: 9998;
		background-color: rgba(0, 0, 0, .6);
	}

	.wui-loading-hidd {
		z-index: -99;
		background-color: transparent;
	}
</style>
